<!--
 * @Author: 清羽
 * @Date: 2022-08-23 18:56:21
 * @LastEditTime: 2022-08-24 08:29:00
 * @LastEditors: you name
 * @Description: 
-->
<!-- add 页 -->
<template>
  <div class="app-container">
    <div class="add">
      <el-form
        ref="form"
        label-width="150px"
      >

        <el-form-item label="分类名称">
          <el-input v-model="cateName">

          </el-input>
        </el-form-item>

        <el-form-item label="上级分类:">
          <el-tooltip
            content="不做选择 则默认为根分类"
            placement="right"
          >
            <el-cascader
              placeholder="请选择商品上级分类:"
              id="el-cascader"
              :props="defaultParams"
              :options="businessCateArray"
              ref="cascaderCateAddr"
              v-model="value"
              clearable
            >
              <template slot-scope="{ node, data }">
                <span>{{data.cate_name}}</span>
                <span v-if="!node.isLeaf"> ({{ data.categoryChild.length }})
                </span>
              </template>
            </el-cascader>
          </el-tooltip>
        </el-form-item>

        <el-form-item label="分类顺序:">
          <!-- <el-input v-model="sort">

          </el-input> -->
          <el-tooltip
            content="数值越小则排的越前"
            placement="right"
          >
            <el-input-number
              v-model="sort"
              @change="handleChange"
              :min="0"
            ></el-input-number>
          </el-tooltip>
        </el-form-item>

        <el-form-item>
          <el-button
            @click="submit"
            type="primary"
            v-loading.fullscreen.lock="buttonLoading"
          >
            确认
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>

</template>

<script>
import { getBusinessCateList, addBusinessCategory } from '@/api/business/category'

export default {
  name: "add",
  data () {
    return {
      businessCateArray: [],
      value: '', // 选中的分类id
      defaultParams: {
        label: "cate_name",
        value: '_id',
        children: "categoryChild",
        checkStrictly: true
      },
      cateName: '',
      sort: 0,
      buttonLoading: false
    }
  },
  components: {},
  // 生命周期 - 创建完成（访问当前this实例）
  created () {
    this.getCateList()
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  },
  // 函数
  methods: {
    getCateList () {
      getBusinessCateList().then(res => {
        // console.log("getBusinessCateList => res", res)
        this.businessCateArray = res.data.data
        console.log("getBusinessCateList => this.businessCateArray", this.businessCateArray)
      })
    },
    submit () {
      this.buttonLoading = true
      // console.log("getData => this.businessCateArray", this.value[0])
      // console.log("getData => this.cateName", this.cateName)
      let data = {
        pid: this.value[0],
        cateName: this.cateName,
        sort: this.sort
      }
      addBusinessCategory(data).then(res => {
        if (res.data.msg) {
          this.$message({
            message: res.data.msg,
            type: "success"

          })
        }
        this.getCateList()
      }).finally(() => {
        this.cateName = ''
        this.value = []
        this.buttonLoading = false
        // setTimeout(() => {
        //   this.buttonLoading = false
        // }, 1000)
      })
    },
    handleChange (value) {
      if (value == undefined) {
        value = 0
      }
      this.sort = value
      console.log("handleChange => this.sort", this.sort)
    }
  }
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.add {
}
</style>